{% extends '../base.html' %}
{% block css %}
<style>
  #main-con{
    width: 1300px;
    padding: 35px 40px;
    margin: 0 auto;
    background-color: #ffffff;
    align-items: flex-start;
  }
  #main-con > div:first-child{
    width: 1260px;
  }
  #main-con > div:nth-child(2) {
    width: 290px;
  }
  #exam-head{
    width: 1300px;
    margin: 0 auto;
    padding-left: 25px;
    font-weight: 600;
    color: #6b6b6b;
    font-size: 18px;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  .error_msg{
    margin: 100px;
    text-align: center;
    font-size: 24px;
  }
  .head-tip{
    width: 10px;
    height: 30px;
    background-color: #ff9900;
    display: inline-block;
    margin-right: 15px;
  }
  #exam-info{
    padding: 30px 20px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
  }
  .avatar-name{
    display: flex;
  }
  .exam-name{
    margin-left: 25px;
    height: 174px;
  }
  .user-count{
    height: 100px;
  }
  .exam-name > p:nth-child(2){
    margin-top: 25px;
  }
  .exam-name > div{
    margin-top: 70px;
  }
  .exam-con-head{
    margin: 30px 0;
  }
  #exam-intro, #exam-desc{
    padding: 30px 40px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    color: #989898; 
    font-size: 18px;
    line-height: 24px;
  }
  .error-div {
    width: 960px;
    height: 250px;
    background-color: rgba(0, 0, 0, 0.05);
    font-size: 28px;
    font-weight: 400;
    border-radius: 5px;
    color: #989898;
  }
  .question-choice{
    margin-top: 20px;
    padding: 10px 20px;
    border: 1px solid #333333;
  }
  textarea{
    margin-top: 20px;
    padding: 10px;
  }
  table{
    width: 80%;
    text-align: center;
  }
  th, td{
    padding: 10px 30px;
  }
  thead{
    background-color: rgba(242, 242, 242, 1);
  }
  .ans-title{
    margin-top: 20px;
  }

</style>
{% endblock css %}

{% block content %}
  <div id="exam-head">
    <span>考试测评 > 考试详情</span>
  </div>
  {% if error_msg %}
  <div class="error_msg">
    <span>{{error_msg}}</span>
  </div>
  {% endif %}
  <div id="main-con">
    <div id='exam-info' class="flex-row-between align-items-start">
      <div class="avatar-name title18">
        考试名称：{{paper.paper_name}}
      </div>
    </div>
    <div class="exam-con-head flex-row-start">
      <span class="head-tip"></span>
      <span class="title24">得分</span>
    </div>
    <table>
      <thead>
        <th>题型</th>
        <th>单选题</th>
        <th>多选题</th>
        <th>判断题</th>
        <th>填空题</th>
        <th>简答题</th>
        <th>总分</th>
      </thead>
      <tbody>
        <tr>
          <td>得分</td>
          <td>{{ mc_score }}</td>
          <td>{{ ma_score }}</td>
          <td>{{ tf_score }}</td>
          <td>{{ bl_score }}</td>
          <td>{{ sa_score }}</td>
          <td>{{ paper.score }}</td>
        </tr>
      </tbody>
    </table>
    <div class="exam-con-head flex-row-start">
      <span class="head-tip"></span>
      <span class="title24">单选题</span>
    </div>
    {% for mc in paper.mc %}
    <div class="questions">
      <p class="title18">{{mc.describe}}</p>
      <p>得分：{{mc.correctscore}} 正确答案：{{mc.standard_answer_display|join:','}} 你的答案：{{mc.student_answer_display|join:','}}</p>
      {% for op in mc.options %}
        <p class="title14 question-choice">
          {% if op.id in mc.student_answer %}
            <input disabled  type="radio" checked name="mc{{mc.id}}" value="{{op.id}}" />
          {% else %}
            <input disabled type="radio" name="mc{{mc.id}}" value="{{op.id}}" />
          {% endif %}
          {{op.content}}
        </p>
      {% endfor %}
    </div>
    {% endfor %}
    <div class="exam-con-head flex-row-start">
      <span class="head-tip"></span>
      <span class="title24">多选题</span>
    </div>
    {% for m in paper.ma %}
    <div class="questions">
      <p class="title18">{{m.describe}}</p>
      <p>得分：{{m.correctscore}} 正确答案：{{m.standard_answer_display|join:','}} 你的答案：{{m.student_answer_display|join:','}}</p>
      {% for op in m.options %}
        <p class="title14 question-choice">
          {% if op.id in m.student_answer %}
            <input disabled type="checkbox" checked name="ma{{m.id}}" value="{{op.id}}" />
          {% else %}
            <input disabled type="checkbox" name="ma{{m.id}}" value="{{op.id}}" />
          {% endif %}
          {{op.content}}
        </p>
      {% endfor %}
    </div>
    {% endfor %}
    <div class="exam-con-head flex-row-start">
      <span class="head-tip"></span>
      <span class="title24">判断题</span>
    </div>
    {% for m in paper.tf %}
    <div class="questions">
      <p class="title18">{{m.describe}}</p>
      <p>得分：{{m.correctscore}} 正确答案：{{m.standard_answer_display|join:','}} 你的答案：{{m.student_answer_display|join:','}}</p>
      {% for op in m.options %}
        <p class="title14 question-choice">
          {% if op.id in m.student_answer %}
            <input disabled type="radio" checked name="tf{{m.id}}" value="{{op.id}}" />
          {% else %}
            <input disabled type="radio" name="tf{{m.id}}" value="{{op.id}}" />
          {% endif %}
          {{op.content}}
        </p>
      {% endfor %}
    </div>
    {% endfor %}
    <div class="exam-con-head flex-row-start">
      <span class="head-tip"></span>
      <span class="title24">填空题（多个空格答案用换行分隔）</span>
    </div>
    {% for b in paper.bl %}
      <p class="title18">{{b.describe}}</p>
      <p class="ans-title">参考答案：</p>
      <textarea disabled  rows="3" cols="80" class="blank">{{b.standard_answer|default:''}}</textarea>
      <p class="ans-title">你的答案：</p>
      <textarea disabled  rows="3" cols="80" class="blank">{{b.student_answer|default:''}}</textarea>
    {% endfor %}
    <div class="exam-con-head flex-row-start">
      <span class="head-tip"></span>
      <span class="title24">简答题</span>
    </div>
    {% for b in paper.sa %}
      <p class="title18">{{b.describe}}</p>
      <p class="ans-title">参考答案：</p>
      <textarea disabled  rows="3" cols="80" class="blank">{{b.standard_answer|default:''}}</textarea>
      <p class="ans-title">你的答案：</p>
      <textarea disabled  rows="3" cols="80" class="blank">{{b.student_answer|default:''}}</textarea>
    {% endfor %}
  </div>
{% endblock content %}

{% block script %}
<script src="/static/study/layui/layui.js" charset="utf-8"></script>
<script src="/static/js/tools.js"></script>
<script>
</script>
{% endblock script %}
  